import { Component, ViewChild, OnInit, Input, ElementRef, AfterViewInit } from '@angular/core';
import { Router } from '@angular/router';
import * as echarts from 'echarts';
import 'echarts-liquidfill';
@Component({
  selector: 'app-chart-liquidfill',
  templateUrl: './chart-liquidfill.component.html',
  styleUrls: ['./chart-liquidfill.component.css']
})
export class ChartLiquidfillComponent implements OnInit, AfterViewInit{

  constructor(
  	private router: Router
  ) { }
  @ViewChild('liquidfill')
  liquidfill: ElementRef
  @Input() title:string;
  @Input() color:string;
  ngOnInit() {
  }
  ngAfterViewInit() {
  	let liquidfill = this.liquidfill.nativeElement;
  	let chart = echarts.init(liquidfill);
  	let color = this.color
  	var option = {
	    series: [{
	        type: 'liquidFill',
	        data: [{
	        	value: 0.6,
	        	itemStyle: {
	        		normal: {
	        			color: color
	        		}
	        	}
	        }],
	        outline:{
	        	show: false
	        },
	        label: {
	        	normal: {
	        		textStyle: {
	        			fontSize: 14
	        		}
	        	}
	        }
	    }]
		};
		chart.setOption(option);
  }

  goto() {
  	this.router.navigate(['/pages/condition-monitoring/diagram-overview/1']);
  }
}
